<template>
    <IDrawer v-model="defaultValue" :loading="loading" :width="860" title="对接设置">
            <Form :model="data" :label-width="100" :rules="ruleValidate" ref="formCreate">
                <Row>
                    <Col :span="6">
                        <FormItem label="货架列数" prop="column">
                            <Input number placeholder="货架列数" v-model="data.column"></Input>
                        </FormItem>
                    </Col>
                    <Col :span="6">
                        <FormItem label="货架行数" prop="row">
                            <Input number placeholder="货架行数" v-model="data.row"></Input>
                        </FormItem>
                    </Col>
                    <Col :span="6">
                        <FormItem label="货架层数" prop="layer">
                            <Input number placeholder="货架层数" v-model="data.layer"></Input>
                        </FormItem>
                    </Col>
                </Row>
                <FormItem label="货架属性" prop="attribute">
                    <RadioGroup v-model="data.attribute">
                        <Radio :label="0">良品货架</Radio>
                        <Radio :label="1">不良品货架</Radio>
                        <Radio :label="2">可销售不良品货架</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="货架分区" prop="partition">
                    <Input placeholder="货架分区" v-model="data.partition"></Input>
                </FormItem>
                <FormItem label="货架状态" prop="status">
                    <RadioGroup v-model="data.status" type="button">
                        <Radio :label="0">不可用</Radio>
                        <Radio :label="1">可用</Radio>
                    </RadioGroup>
                </FormItem>

            </Form>
            <div slot="footer">
                <Button type="primary" icon="ios-add" @click="submit('formCreate')">提交</Button>
                <Button type="warning" icon="md-log-out" @click="defaultValue = false">返回</Button>
            </div>
    </IDrawer>
</template>

<script>
    import IForm from "../../../components/content/form";
    import contentDrawer from "../../../mixins/contentDrawer";
    import RemoteSelect from "../../../components/form/remoteSelect";
    import IDrawer from "../../../components/content/drawer";

    export default {
        name: "create",
        mixins: [contentDrawer],
        components: {IDrawer, RemoteSelect, IForm},
        data() {
            return {
                loading: false,
                data: {
                    status: 1
                },
                ruleValidate: {
                    column: [
                        {required: true, type: 'number', message: '货架列数不能为空', trigger: 'blur'}
                    ],
                    row: [
                        {required: true, type: 'number', message: '货架行数不能为空', trigger: 'blur'}
                    ],
                    layer: [
                        {required: true, type: 'number', message: '货架层数不能为空', trigger: 'blur'}
                    ],
                    attribute: [
                        {required: true, type: 'number', message: '货架属性必须选择', trigger: 'change'}
                    ],
                    partition: [
                        {required: true, message: '货架分区不能为空', trigger: 'blur'},
                        {pattern: /^[A-Z]{1,3}$/, message: '货架分区格式不正确，1-3位大写字母', trigger: 'blur'}
                    ],
                    status: [
                        {required: true, type: 'number', message: '货架状态必须选择', trigger: 'change'},
                    ],
                }
            }
        },
        methods: {
            submit(name) {
                this.validate(name).then(() => {
                    this.loading = true;
                    this.$http.post(`warehouse/location`,
                        Object.assign({}, this.data)
                    ).then(() => {
                        this.defaultValue = false;
                    }).finally(() => {
                        this.loading = false;
                    });
                }).catch(() => {
                });
            }
        }
    }
</script>

<style scoped>

</style>